<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <!--当你在阅览某网站的图片时，可能会由于图片资源比较大而加载缓慢，需要消耗一小段时间来呈现到眼前，这个体验肯定是不太友好的
    （就像网站切换页面，有时候会加载资源比较慢，为了给用户较好的体验，一般都会先出一个正在加载的友好提示页面），
    所以这个案例的功能就是在图片资源还没加载出来时，先显示默认背景图，当图片资源真正加载出来了之后，
    再把真实图片放置到对应的位置上并显示出来。-->
</head>
<body>
<div id="case11-demo5">
    <div v-for="item in imageList">
        <img src="../images/timg2.jpg" alt="默认图片" v-image="item.url" width="100%"/>
    </div>
</div>
<script type="text/javascript">
    Vue.directive('image',{
        inserted:function (el,binding) {
            //为了真实体现效果，用了延时操作
            setTimeout(function () {
                el.setAttribute("src",binding.value)
            },Math.random()*1200)
        }
    })
    var case11Demo5=new Vue({
        el:"#case11-demo5",
        data:{
            imageList:[
                {
                    url:"http://pic.netbian.com/uploads/allimg/190917/183634-1568716594f366.jpg"
                },
                {
                    url:"http://pic.netbian.com/uploads/allimg/190824/205524-1566651324f88b.jpg"
                },
                {
                    url:"http://pic.netbian.com/uploads/allimg/200511/234750-158921207008d8.jpg"
                },
            ]
        }
    })
</script>
</body>
</html>